<template>
	<div class="leftNav">
		<div class="top-box">
			<div
				v-for="i in navList"
				:key="i.name"
				class="top-box-item mx-2 mt-4"
				:class="checkActive(`ai-${i.icon}`) ? 'active' : ''"
				@click="closeAllPopup(i)"
			>
				<img
					:src="getImageUrl(i.icon, checkActive(`ai-${i.icon}`) ? 'on' : 'off')"
					alt=""
					class="iconimg"
				/>
				<div style="text-align: center; font-size: 12px">{{ i.name }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { emit } from "process";
import { useTaskStore, useUserStore } from "@/store";

let route = useRoute();
let router = useRouter();

let navList = [
	{
		icon: "dataManage",
		name: "数据服务",
	},
	{
		icon: "processing",
		name: "AI解译",
	},
	{
		icon: "bianhua",
		name: "变化检测",
	},
	{
		icon: "analysis",
		name: "对比分析",
	},
	{
		icon: "management",
		name: "数据管理",
	},
];
let checkActive = (routeName: string) => {
	let hasRoute = false;
	for (const routeItem of route.matched) {
		const path = routeItem.path;
		const dealRouteName = "/main/" + routeName;
		if (path === dealRouteName) {
			hasRoute = true;
			break;
		}
	}
	return hasRoute;
};
const taskStore = useTaskStore();

const closeAllPopup = (i: any) => {
	console.log("closeAllPopup");
	router.push(`/main/ai-${i.icon}`),
		taskStore.setInfo({
			taskStatus: false,
			shpPopshow: false,
			vecPopshow: false,
			vecLegendShow: false,
			leftLegendShow: false,
			rightLegendShow: false,
			changeDetctionPopshow: false,
		});
};
let getImageUrl = (iconName: string, status: string) => {
	return new URL(`../../assets/images/main/${iconName}-${status}@2x.png`, import.meta.url).href;
};
</script>

<style>
.leftNav {
	width: 70px;
	height: calc(100% - 4rem);
	/* background-color: #2b3a5b; */
	position: fixed;
	top: 4rem;
	left: 0;
	z-index: 100;
	background: linear-gradient(180deg, rgba(1, 12, 18, 0.9) 0%, rgba(4, 36, 70, 0.9) 100%);
}
.iconimg {
	width: 60px;
	height: 60px;
}
</style>
